import React, { useState, useEffect, useContext } from 'react'
import Filter from './Filter'
import BarChart from './BarChart'
import WaterChart from './WaterChart'
import Rank from './Rank'
import County from './County'
import Industry from './Industry'
import dayjs from 'dayjs'
import { Spin, message } from 'antd'
import { getEvaluateStatistics } from '&/api/electricity'
import Container from '@/appComponents/Container'
import { LayoutContext } from '@/pages/layouts/context'

import './index.scss'
const GuaranteePeriod = () => {
  const { activePlan } = useContext(LayoutContext)
  const [isLoading, setIsLoading] = useState(true)
  const [data, setData] = useState(null)
  const [rankData, setRankData] = useState([])
  const [rankData1, setRankData1] = useState([])
  const [countyData, setCountyData] = useState([])
  const [industryData, setIndustryData] = useState([])
  const [paramsData, setParamsData] = useState({
    start_time: dayjs().add(-1, 'd').format('YYYY-MM-DD'),
    end_time: dayjs().format('YYYY-MM-DD'),
    county_id: -1
  })

  const getParams = (params) => {
    let newParams = {}
    for (let key in params) {
      if (params[key] !== -1) {
        newParams[key] = params[key]
      }
    }
    return newParams
  }
  const onQuery = (value) => {
    setIsLoading(true)
    getEvaluateStatistics({
      ...getParams(paramsData),
      plan_id: activePlan?.plan_id
    })
      .then((res) => {
        setIsLoading(false)
        setIndustryData(res.industry_pivot_data)
        setCountyData(res.count_pivot_data)
        setData(res.measure_flow_data)
        setRankData(res.top10_enterprises)
        setRankData1(res.night_enterprises)
      })
      .catch((err) => {
        message.error(`接口错误,信息为:${err}`)
        setIsLoading(false)
      })
  }

  useEffect(() => {
    if (!activePlan) return
    setParamsData((state) => {
      state.start_time = activePlan.start_time
      state.end_time = activePlan.end_time
      onQuery()
      return {
        ...state
      }
    })
  }, [activePlan?.plan_id])
  return (
    <div className="GuaranteePeriod">
      <Container>
        <Container.ContainerQuery title="查询条件">
          <Filter
            onQuery={onQuery}
            paramsData={paramsData}
            setParamsData={setParamsData}
          />
        </Container.ContainerQuery>
        <Container.ContainerContent title="查询结果">
          <Spin tip="Loading......" spinning={isLoading}>
            <div className="container">
              <div className="city">
                <div className="title">全市企业落实情况</div>
                <div className="box">
                  <div className="left">
                    <div className="barChart">
                      <BarChart data={data} />
                    </div>
                    <div className="waterChart">
                      <WaterChart />
                    </div>
                  </div>
                  <div className="right">
                    <Rank data={rankData} data1={rankData1} />
                  </div>
                </div>
              </div>
              <div className="area">
                <div className="title">各区企业落实情况</div>
                <div className="box">
                  <County data={countyData} />
                </div>
              </div>
              <div className="industry">
                <div className="title">各行业企业落实情况</div>
                <div className="box">
                  <Industry data={industryData} />
                </div>
              </div>
            </div>
          </Spin>
        </Container.ContainerContent>
      </Container>
    </div>
  )
}
export default GuaranteePeriod
